<template>
  <div class="model">
    <div>
      <div class="toolItem">
        <svg class="icon-third" aria-hidden="true" style="font-size: 5px">
          <use xlink:href="#icon-third-tuijian5"></use>
        </svg>
        <span class="toolTitle">新闻资讯</span>
		<span style="position:absolute;right:5px;">更多></span>
      </div>
      <div class="flex index-news">
		  <ul>
		  	<li v-for="article in newsList">
		  		<h3>
		  			<router-link :to="`/news/detail/${article.id}`" target="_blank">
						<div class="news-img">
							<img :src="getFile(article.coverImg)" alt="">
						</div>
						<div class="news-content">
							<p>{{article.title}}</p>
							<p style="position:absolute;bottom:0;"><span>{{ article.createTime.substr(0,10) }}
							</span></p>
						</div>
		  			  
		  			</router-link>
		  			
		  		</h3>
		  	</li>
		  </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import defaultImg from "@/assets/img/bg.png";
import { getNewsList } from "@/api/news";
const newsList = ref<any>([]); // 商品列表


onMounted(() => {
	getNewsListTop()
});

async function getNewsListTop(){
	
	const newsParams ={
		categoryId: '1',
		pageNo:1,
		pageSize: 4,
	}
	const newsData: any = await getNewsList(newsParams);
	console.log("data:",newsData)
	newsList.value = newsData.result.records;
}

</script>

<style scoped lang="scss">
@import "@/assets/style/course/global.scss";


.toolItem {
  display: flex;
  align-items: center;
  margin: 20px 0;
  position:relative;
}

.toolTitle {
  font-size: 16px;
  margin-left: 5px;
}
.index-news{
	ul{
		width:100%;
		overflow:hidden;
		li{
			width:49%;
			overflow:hidden;
			float:left;
			margin-bottom:15px;
			&:nth-child(2n){
				margin-left:2%;
			}
			h3{
				height: 100%;
				overflow: hidden;
				position: relative;
				a{
					color:#333333;
					.news-img{
						width:40%;
						float:left;
						img{
							width:100%;
							height:140px;
							border-radius:8px;
						}
					}
					.news-content{
						width:58%;
						float:right;
					}
				}
			}
			
			
		}
	}
}
</style>
